<template>
  <button class="upload-btn" @click="chooseImage">上传文件</button>
</template>

<script>
export default {
  data() {
    return {
      // 选择的文件路径
      selectedFiles: [],
    };
  },
  methods: {
    /**
     * 点击上传图片的按钮，选择图片并上传到云存储
     */
    async chooseImage() {
      try {
        // 使用 uni.chooseImage 来选择图片
        const res = await uni.chooseImage({
          count: 6, // 最多选择6张图片
          sizeType: ['original', 'compressed'], // 支持原图和压缩图
          sourceType: ['album'], // 只允许从相册选择
        });

        // 存储选择的文件路径
        this.selectedFiles = res.tempFilePaths;
        console.log('选择的文件路径：', this.selectedFiles);

        // 上传文件到云存储
        for (let filePath of this.selectedFiles) {
          this.uploadFile(filePath);
        }

        // 上传成功的提示
        uni.showToast({
          title: '图片上传成功！',
          icon: 'success',
          duration: 2000,
        });
      } catch (error) {
        // 错误处理
        console.error('选择图片失败:', error);
        uni.showToast({
          title: '图片选择失败，请重试',
          icon: 'none',
        });
      }
    },

    /**
     * 上传文件到云存储
     * @param {string} filePath - 需要上传的文件路径
     */
    async uploadFile(filePath) {
      try {
        const fileName = filePath.split('/').pop();
        const cloudPath = `photo/${fileName}`; // 云存储的路径

        // 初始化 uniCloud 服务
        const storageSpace = uniCloud.init({
          provider: 'aliyun',
          spaceId: 'mp-dad194ed-0c4b-4e8a-94a2-87331f7ffb74', // 填入你的空间 ID
          clientSecret: '1IJbCnTtvMUA4DKF62vNzw==', // 填入你的 clientSecret
          endpoint: 'https://api.next.bspapp.com', // 填入你的 endpoint
        });

        // 上传文件到云存储
        const uploadRes = await storageSpace.uploadFile({
          filePath,
          cloudPath, // 设置文件上传到云存储的路径
        });

        console.log('上传成功:', uploadRes);
        uni.showToast({
          title: '文件上传成功',
          icon: 'success',
          duration: 2000,
        });
      } catch (error) {
        console.error('上传失败:', error);
        uni.showToast({
          title: '文件上传失败，请重试',
          icon: 'none',
        });
      }
    },
  },
};
</script>

<style scoped>
.upload-btn {
  width: 300rpx;
  height: 100rpx;
  background-color: #0fd177;
  color: #fff;
  border-radius: 10rpx;
  font-size: 36rpx;
  margin-top: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-btn:active {
  background-color: #0fd177;
  transform: scale(0.95);
}

.upload-btn::before {
  content: '📷';
  margin-right: 10rpx;
}
</style>
